import * as THREE from 'three'
import createApp from '../../core'

function createDirectionalLightHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)
  const light = new THREE.DirectionalLight(0xFFFFFF)
  const axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)

  light.position.set(data.x, data.y, data.z)
  let helper = new THREE.DirectionalLightHelper(light, 20)
  scene.add(helper)

  function refresh () {
    scene.remove(helper)
    light.position.set(data.x, data.y, data.z)
    helper = new THREE.DirectionalLightHelper(light, 20)
    scene.add(helper)
  }

  const folder = gui.addFolder('平行光的位置')
  folder.add(data, 'x', -200, 200).onChange(refresh)
  folder.add(data, 'y', -200, 200).onChange(refresh)
  folder.add(data, 'z', -200, 200).onChange(refresh)
}

const data = {
  x: 0,
  y: 0,
  z: 0
}

export {
  createDirectionalLightHelper
}
